<template>
  <div>

    <template>
      <div class="block" style="height: 125px; width: 1629px;">
        <span class="demonstration" style="padding-left: 600px">清算日期</span>
        <el-date-picker
          v-model="date"
          type="date"
          align="right"
          value-format="yyyyMMdd"
          placeholder="选择日期">
        </el-date-picker>

        <div style="padding-left: 375px; padding-top: 10px">
          <el-row>
            <el-button type="primary" @click.native.prevent="getListInfo">查询</el-button>
            <el-button type="success" @click ="getTaskName">实时任务</el-button>
            <el-button type="info" @click="pauseTaskDialogVisible = true">暂停</el-button>
            <el-button type="warning" @click="resumeTaskDialogVisible = true">继续</el-button>
            <el-button type="danger" @click="redoTaskDialogVisible = true">重做</el-button>
          </el-row>
          <el-row>
            <div style="padding-left: 250px" v-if="visibility">当前操作任务:{{CurrentOperationTask.taskPath}}</div>
          </el-row>
        </div>

        <el-dialog title="实时任务" :visible.sync="dialogFormVisible">
            <el-form>
              <el-form-item label="任务名称" :label-width="formLabelWidth">
                <el-select v-model="form.taskName" filterable placeholder="请选择" size="medium">
                  <el-option
                      v-for="item in taskName"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="清算日期" :label-width="formLabelWidth">
              <el-date-picker
                    v-model="form.settleDate "
                    type="date"
                    value-format="yyyyMMdd"
                    placeholder="选择日期">
              </el-date-picker>
              </el-form-item>
              <el-form-item label="任务批次(8位数字)" :label-width="formLabelWidth">
                <el-input v-model="form.taskBatch" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="任务参数" :label-width="formLabelWidth">
                <el-input v-model="form.taskParam" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click.native.prevent="addEntity()">保存</el-button>
            </div>
          </el-dialog>
          <!-- <el-dialog
               :visible.sync="addEntityDialogVisible"
               width="30%">
            <span>这是一段信息</span>
          </el-dialog> -->
          <el-dialog
            title="操作确认"
            :visible.sync="pauseTaskDialogVisible"
            width="30%"
            center>
            <span>请确认是否暂停[{{this.CurrentOperationTask.taskPath}}]任务</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="pauseTaskDialogVisible = false">取 消</el-button>
              <el-button type="background-color: #0065ff;" @click="pauseTask">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="操作确认"
            :visible.sync="resumeTaskDialogVisible"
            width="30%"
            center>
            <span>请确认是否继续[{{this.CurrentOperationTask.taskPath}}]任务</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="resumeTaskDialogVisible = false">取 消</el-button>
              <el-button @click="resumeTask">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="操作确认"
            :visible.sync="redoTaskDialogVisible"
            width="30%"
            center>
            <span>请确认是否继续[{{this.CurrentOperationTask.taskPath}}]任务</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="redoTaskDialogVisible = false">取 消</el-button>
              <el-button @click="redoTask(1)" >同时重做依赖任务</el-button>
              <el-button @click="redoTask()" >重做</el-button>
            </span>
          </el-dialog>
      </div>
    </template>

    <template>
      <div class="line"></div>
    </template>
    <template>
      <el-container>
        <el-main>
          <div>
            <el-descriptions title="任务管理">
            </el-descriptions>
            <el-table
                  :data="content"
                  height="500px"
                  highlight-current-row
                  @row-click="handleCurrentChange">
              <el-table-column
                    prop="topTask"
                    width="500">
              </el-table-column>
              <el-table-column
                    prop="stateDesc"
                    width="100">
              </el-table-column>
            </el-table>
          </div>
        </el-main>
        <el-main>
          <el-descriptions title="实时任务监控">
          </el-descriptions>
            <div id="tree-container" style="width: 600px;height:600px;"></div>
        </el-main>
      </el-container>
    </template>


  </div>
</template>

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>

  import * as echarts from "echarts"
    export default{
      data(){
        return{
          date : "",
          content : [],
          taskName : [],
          // 添加实时任务结果提示
          addEntityDialogVisible : null,
          dialogFormVisible: false,
          pauseTaskDialogVisible : false,
          resumeTaskDialogVisible : false,
          redoTaskDialogVisible : false,
          form: {
                    taskName : null,
                    settleDate : null,
                    taskBatch : null,
                    taskParam : null
                  },
          formLabelWidth: '200px',
          message : null,
          CurrentOperationTask : {
            settleDate : "",
            taskBatch : "",
            taskPath : "",
            taskType : "",
          },
          //当前选中任务可见性
          visibility : false,
          SubTasks : {},
                }
      },
      methods:{
        redoTask : function(redoFlag){
          var taskType = this.CurrentOperationTask.taskType;
          if(taskType == "0"){
            this.$post(`admin/batchtask/redoTask`,{
              taskPath : this.CurrentOperationTask.taskPath,
              taskAllPath : this.CurrentOperationTask.taskPath,
              settleDate : this.CurrentOperationTask.settleDate,
              taskBatch : this.CurrentOperationTask.taskBatch,
              taskType : this.CurrentOperationTask.taskType,
              redoFlag : redoFlag
            }).then((r) => {
              this.$alert(r.data.message, '操作确认', {
                        confirmButtonText: '确定',
                        center : true}
                      );
              this.redoTaskDialogVisible = false;
              this.getListInfo();
            })
          }else{
            this.$post(`admin/batchtask/redoTask`,{
              taskPath : this.CurrentOperationTask.taskPath,
              taskAllPath : this.CurrentOperationTask.parentPath.concat("%",this.CurrentOperationTask.taskPath),
              settleDate : this.CurrentOperationTask.settleDate,
              taskBatch : this.CurrentOperationTask.taskBatch,
              taskType : this.CurrentOperationTask.taskType,
              redoFlag : redoFlag,
              }).then((r) => {
                this.$alert(r.data.message, '操作确认', {
                          confirmButtonText: '确定',
                          center : true}
                        );
                this.redoTaskDialogVisible = false;
                this.getListInfo();
              })
          }
        },
        resumeTask : function(){
          this.$post(`admin/batchtask/resumeTask`,this.CurrentOperationTask).then((r) => {
            this.$alert(r.data.message, '操作确认', {
                      confirmButtonText: '确定',
                      center : true}
                    );
            this.resumeTaskDialogVisible = false;
            this.getListInfo();
          })
        },
        pauseTask : function(){
          if(this.CurrentOperationTask.taskPrio == "0"){
            this.$alert("该任务已暂停", '操作确认', {
                      confirmButtonText: '确定',
                      center : true}
                    );
            this.pauseTaskDialogVisible = false;
          }else{
            this.$post(`admin/batchtask/pauseTask`,this.CurrentOperationTask).then((r) => {
              this.$alert(r.data, '操作确认', {
                        confirmButtonText: '确定',
                        center : true}
                      );
              this.pauseTaskDialogVisible = false;
            })
          }
          this.getListInfo();

        },
        getListInfo:function(){
          this.$get(`admin/batchtask/list`,{
            settleDate : this.date,
          }).then((r) => {
            this.content = r.data.content;
            this.date = null;
          })
        },
        getTaskName:function(){
          this.$get(`admin/batchtask/getTaskName`).then((r) =>{
              this.taskName = r.data;
              this.dialogFormVisible = true;

          })
        },
        handleClose:function(done) {
                this.$confirm('确认关闭？')
                  .then(_ => {
                    done();
                  })
                  .catch(_ => {});
          },
        addEntity:function(){
          console.log(this.from)
          this.$post(`admin/batchtask/addEntity`,this.form).then((r) => {
            this.message = r.data.message;
            this.addEntityDialogVisible = true;
             // setTimeout(()=>{
             //    this.addEntityDialogVisible = false
             //  },2000)
             this.$alert(r.data.message, '操作确认', {
                       confirmButtonText: '确定',
                       center : true}
                     );
            this.dialogFormVisible = false;
            this.form = {};


          })
        },
        handleCurrentChange:function(val) {
          console.log(val);
                  this.$post(`admin/batchtask/findSubTasks`,val).then((r) => {
                  this.SubTasks = r.data;
                  this.CurrentOperationTask = {};
                  this.CurrentOperationTask.settleDate = val.settleDate;
                  this.CurrentOperationTask.taskBatch = val.taskBatch;
                  this.CurrentOperationTask.taskPath = val.taskPath;
                  this.CurrentOperationTask.taskType = val.taskType;
                  this.CurrentOperationTask.taskPrio = val.taskPrio;
                  this.visibility = true;
                  var taskMap = echarts.init(document.getElementById('tree-container'));
                  //this.$options.methods.forceMockThreeData(r.data);

                  var taskMap = echarts.init(document.getElementById('tree-container'));
                  var topNode = "1111111";
                  var depth = 0;
                  var nodes = null;
                  var links = null;
                  var nodes = new Array();
                  var links = new Array();
                  var data = r.data;
                  var selectData = data;//选中的节点
                  var xdot=0,ydot = 0;
                  var color = '',i=0;
                  topNode = data[0].parentPath;
                  if(data.length<5){xdot = (data.length/2)*100;ydot = 10;}
                   	else{ xdot = 200;ydot = 100;}
                  nodes.push({name:topNode,x:xdot,y:ydot});
                  var categories = [data.length];
                  for(let index=0; index<data.length; index++){
                  	var statusName="";
                  	var subName;
                  	if(data[index].taskState == 'ER')statusName = "任务失败";
                  		else if(data[index].taskState == 'IN')statusName="初始化";
                  		else if(data[index].taskState == 'OK')statusName="任务成功";
                  		else if(data[index].taskState == 'others')statusName="运行中";
                  	var categor = data[index].taskDesc + '('+statusName+')';
                  	categories[i++] = { name : categor}
                  	subName = (data[index].taskPath).substr((data[index].taskPath).lastIndexOf('/')+1);
                  	if(index <5){
                  		xdot = (index+1)*100;
                  		if(data.length<5)ydot = 150;
                  	else ydot = 10;
                  	}else if(index > 5){
                  		xdot = (index -5)*100;
                  		ydot = 170;
                  }
                  nodes.push({itemStyle:null,label:{normal:{show:true}},name:subName,category:categor,y:ydot,x:xdot});
                  links.push({target:subName,source:topNode});
                  		};
                  var option = {  //tooltip:{'显示正在运行的实时任务状态'},
                    title:{text:'实时任务监控',top: 'bottom',left: 'right'},animationDurationUpdate:1500,animationEasingUpdate:'quinticInOut',
                    toolbox: {show: true,feature: {saveAsImage: {} } },legend: [{
                    data: categories.map(function (a) {return a.name})
                    }],series:[{type:'graph',layout:'none',symbolSize:80,roam:false,label:{normal:{show:true}},edgeSymbol:['circle','arrow'],
                      	        edgeSymbolSize:[4,10],edgeLabel:{normal:{textStyle:{fontSize:20,color:"#7b68ee"}}},categories: categories,
                      	        data:nodes,links:links,lineStyle: { normal: { color: '#b03a5b',curveness: 0.3 }}
                      	    }]
                      	};
                      	// 使用刚指定的配置项和数据显示图表。
                  taskMap.setOption(option);
                    if(taskMap){
                      taskMap.clear();
                    if (option && typeof option === "object") {
                      taskMap.setOption(option, false);
                      }
                    }
                      	//restart();

                    taskMap.on('click',(params) => {
                      this.CurrentOperationTask = {};
                      if(params.dataType == 'node'){
                          	var subName;
                          	for(let index=0; index<this.SubTasks.length; index++){
                              subName = (this.SubTasks[index].taskPath).substr((this.SubTasks[index].taskPath).lastIndexOf('/')+1);
                              if(subName == params.name){
                                this.CurrentOperationTask.settleDate = this.SubTasks[index].settleDate;
                                this.CurrentOperationTask.taskBatch = this.SubTasks[index].taskBatch;
                                this.CurrentOperationTask.taskPath = subName;
                                this.CurrentOperationTask.taskType = this.SubTasks[index].taskType;
                                this.CurrentOperationTask.parentPath = this.SubTasks[index].parentPath;
                              }
                            }
                            if(JSON.stringify(this.CurrentOperationTask)=='{}'){
                              subName = (this.SubTasks[0].taskPath).substr(0,(this.SubTasks[0].taskPath).lastIndexOf('/'));
                              this.CurrentOperationTask.settleDate = this.SubTasks[0].settleDate;
                              this.CurrentOperationTask.taskBatch = this.SubTasks[0].taskBatch;
                              this.CurrentOperationTask.taskPath = subName;
                              this.CurrentOperationTask.taskType = "0";
                            }
                          }
                    });
              })
        },
    },
    }
</script>

<style type="text/css">
  .el-button--primary {
    background-color: #0065ff;
    width: 130px;
    height: 40px;
    border-color: #0065ff;
      }
  .el-button--success {
    background-color: #c9302c;
    width: 130px;
    height: 40px;
    border-color: #c9302c;
      }
  .el-button--info {
    background-color: #2cb6f8;
    width: 130px;
    height: 40px;
    border-color: #2cb6f8;
      }
  .el-button--warning {
    background-color: #ec971f;
    width: 130px;
    height: 40px;
    border-color: #ec971f;
      }
  .el-button--danger {
    background-color: #6434d5;
    width: 130px;
    height: 40px;
    border-color: #6434d5;
      }
  .line{
    float:right;
    width: 110%;
    height: 10px;
    background:#f0f2f5;
    position:absolute;
    left:-20px;
  }
  .leftDescriptions{
    padding-top: 20px;
  }

  .el-aside{
    background-color: red;
    line-height: 600px;
    taxt-align: left;
    vertical-align:text-top;
  }

</style>
